<template>
  <div>
    <!-- 上一个页面的视频详情 -->
    <div></div>
    <!-- 视频本体 -->
    <div class="vedeioB">
      <van-nav-bar class="de" left-arrow @click-left="onClickLeft" />
      <video width="100%" height="100%" src="" object-fit: fill controls></video>
    </div>
    <!-- 标题 -->
    <div class="titel">
      <p class="titel_titel">《谷麦钓手石头》小伙用独特钓法，连钓十几条大板鱼</p>
      <van-divider />
    </div>
    <!-- 个人简介 -->
    <div class="userFlag">
      <!-- 头像名称及其微信图标 -->
      <div class="user_tou">
        <!-- 头像部分 -->
        <div>
          <!-- 头像 -->
          <div>
            <img
              class="titleImg"
              src="https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg"
            />
          </div>
        </div>
        <!-- 微信图标部分 -->
        <div class="wx_dt">
          <!-- 名称  flg -->
          <div>
            <p class="wx_txt">谷卖钓手石头</p>
            <p class="wx_flg">谷卖钓鱼，解锁钓鱼新技能</p>
          </div>
          <div>
            <img class="flg_img" src="static/video-img/wx.png" />
            <img class="flg_imgs" src="static/video-img/pengyou.png" />
          </div>
          <!-- <div>
            
          </div> -->
        </div>
      </div>
      <!-- 个人简介的文字叙述 -->
      <div class="txt">
        等哈送风机叫阿里克斯的飞机离开数据来看就拉开圣诞节分类收集大量肌肤的拉伸技法卢卡斯技法卢卡斯大家开了房间啊设立考点附近开了啊圣诞节了费德勒j法律是解放拉萨解放立刻受到就
        <van-divider />
      </div>
    </div>
    <!-- 选集部分 -->
    <div>
      <!-- 标题部分 -->
      <div class="vd_Title">
        <span>选集</span>
        <span>
          全部
          <van-icon class="TxtIcon" name="arrow" />
        </span>
      </div>
      <!-- 图片内容部分 -->
      <div>
        <div class="videoFatherSon">
          <div class="videoFather">
            <ul>
              <li
                class="videoSon"
                v-for="(item,index) in  ListV"
                :key="index"
                @click="startMouser()"
              >
                <div>
                  <img class="video_Img" :src="item.url" />
                </div>
                <div class="videoDt_txt" v-text="item.txt"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <van-divider />
    </div>
    <!-- 其他节目 -->
    <div>
      <div>
        <span class="OtherOther">其他节目</span>
      </div>
      <!-- 其他节目视频部分 -->
      <div class="OtherVideoFather">
        <ul class="OtherVideoSon">
          <li v-for="(item,index) in arrList" :key="index" class="Other">
            <div class="OtherVideo">
              <img class="ImageTxt" :src="item.url" />
              <div class="OtherVideoCon">
                <span class="OtherTitel" v-text="item.titel"></span>
                <p class="OthertTxt" v-text="item.txt"></p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="Dashed"></div>
    </div>
    <!-- 评论 -->
    <div>
      <div>
        <ul v-for="(item,index) in UserList" :key="index">
          <li class="comment">
            <div class="Image_father">
              <img class="ImageU" :src="item.url" />
            </div>

            <div class="comment_father">
              <!-- 名字  等级   楼层 -->
              <div class="comment_ngs">
                <div>
                  <span class="comment_name" v-text="item.name"></span>
                  <div class="comment_grade" v-text="item.grade"></div>
                </div>
                <div>
                  <span class="comment_storey" v-text="item.storey"></span>
                </div>
              </div>
              <!-- 内容 -->
              <div class="comment_c">
                <span class="comment_centen" v-text="item.centen"></span>
              </div>
              <!-- 时间 地点   回复点赞 -->
              <div class="comment_ta">
                <div class="comment_timea">
                  <span class="commentTxt" v-text="item.time"></span>
                  <span class="commentTxt" v-text="item.address"></span>
                </div>
                <div class="comment_hs">
                  <span>
                    <van-icon class="video_IconSpan" name="more" color="#DCDCDC" />
                    <span class="comment_txt_text">回复</span>
                  </span>
                  <span>
                    <van-icon class="video_IconSpan" name="more" color="#DCDCDC" />
                    <span class="comment_txt_text" v-text="item.sum"></span>
                  </span>
                </div>
              </div>
            </div>
          </li>
          <van-divider />
        </ul>
      </div>
    </div>
    <!-- 底部评论 -->
    <div class="NB">
      <div class="foot">
        <div class="foot_comment">
          <van-icon class="foot_icon" name="edit" />
          <span class="comment_foot">发评论</span>
        </div>
        <div class="foot_szf">
          <div class="foot_name">
            <div>
              <van-icon class="footImg" name="chat-o" />
            </div>
            <!-- 数量 -->
            <div class="foot_gun">4891</div>
            <!-- <span>4891</span> -->
          </div>
          <div class="foot_name">
            <div>
              <van-icon class="footImg" name="good-job-o" />
            </div>
            <!-- 点赞 -->
            <div class="foot_gun">949</div>
          </div>
          <div class="foot_name">
            <div>
              <van-icon class="footImg" name="share-o" />
            </div>
            <!-- 分享 -->
            <div class="foot_gun">分享</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 视频详情页
      ListV: [
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '《谷卖钓手石头》小伙用独特钓法,连..'
        }
      ],
      arrList: [
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          titel: '游钓中国第七季',
          txt: '李大毛带领大家游钓全国李大毛带领大家游钓全国李'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          titel: '游钓中国第七季',
          txt: '李大毛带领大家游钓全国李大毛带领大家游钓全国李'
        }
      ],
      UserList: [
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          name: '水落石出56789',
          grade: 'LV7',
          storey: '沙发',
          centen: '厉害',
          time: '1天前',
          address: '济南',
          sum: '0'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          name: '水落石出56789',
          grade: 'LV7',
          storey: '沙发',
          centen: '厉害',
          time: '1天前',
          address: '济南',
          sum: '0'
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: '视频'
      });
    },
    startMouser() {}
  }
};
</script>

<style scoped>
@import url(./css/videoDetails.css);
</style>